<template>
  <div>
    <p>
      {{ str }}
      {{ num + "aaa" }}
      {{ str.length }}
      {{ str.split("ll").reverse().join("aa") }}
    </p>
    <p>
      {{ num }}
      {{ num + num1 }}
      {{ num > num1 }}
      {{ num.toFixed(2)  }}
    </p>
    <p>
      {{ flag }}
    </p>
    <p>
      {{ arr }}
      {{ arr[3] }}
    </p>
    <p>
      {{ obj }}
      {{ obj.name }}
    </p>
    <p>
      {{ num > num1 ? "是" : "否" }}
    </p>
  </div>
</template>

<script>
import { reactive, toRefs } from "vue";

export default {
  setup() {
    const state = reactive({
      str: "Hello",
      num: 1,
      num1: 100,
      flag: true,
      arr: [1, 2, 3, 4],
      obj: {
        name: "茉莉",
        age: 18,
      },
    });

    return {
      ...toRefs(state),
    };
  },
};
</script>

<style lang="scss" scoped>
</style>